<template>
	<div class="pay">
		<header>
			<router-link to="/mobile/home"><</router-link>
			<h3>支付页面</h3>
		</header>
		<div class="box">
			<ul v-for="(index,j) in order.items">
				<li >
					<div class="header">
						<div class="h1">
							<img src="../../assets/img/mobile/屏幕截图 2024-01-06 234354.png">
							<h5>当当自营</h5>
						</div>
						<div class="h2">
							<span>交易成功</span>
						   <i class="el-icon-delete"></i>
						</div>	
					</div>
				<div class="show">
					<div class="img">
						<img :src="`http://127.0.0.1/api/public/showimg/${index.book.pic}`">
					</div>
					<p>{{index.book.name}}</p>
				</div>
					<aside class="right">
						<label>共件{{index.num}}商品</label>
						<span>实付: ￥{{index.price*index.num}}</span>
					</aside>
				</li>
			</ul>
		</div>
		<div class="box1">
			<button @click="add()">立即支付</button>
		</div>
	</div>
</template>

<script>
	export default {
		name:'MobilePay',
		data() {
			return{
				order:{},
			}
		},
		methods:{
			add(){
				this.$postkv('/api/fore/ord/addPay/'+this.$route.query.id).then((resp)=>{
					if(resp.data.code == 200){
						this.$message({
							message:resp.data.msg,
							type:'success'
						})
					}else{
						this.$message({
							message:resp.data.msg,
							type:'error'
						})
					}
				})
			}
		},
		mounted() {
			console.log(this.$route.query.id);
			this.$get('/api/fore/ord/findByOrdid/'+this.$route.query.id).then((resp)=>{
				console.log(resp.data.data)
				this.order = resp.data.data;
				
			})
		}
	}
</script>

<style scoped>
	.pay {
		width: 100%;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.pay header{
		width: 100%;
		height: 3rem;
		display: flex;
		align-items: center;
		border-bottom: 0.0625rem solid gainsboro;
	}
	.pay a{
		font-size: 1.25rem;
		margin-left: 1.25rem;
		margin-right: 32.5%;
	}
	.pay .box{
		width: 90%;
		margin: 0 auto;
	}
	.pay .box ul{
		width: 100%;
		align-items: center;
		background-color: white;
		margin-bottom: 1rem;
		border-radius: 0.5rem;
		height: 12rem;
		border: 0.0625rem solid gainsboro;
	}
	.pay .box ul li{
		font-size: 0.8rem;
		width: 100%;
		height: 100%;
	}
	.pay .header{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 20%;
	}
	.pay .header img{
		width: 1.5rem;
		height: 1.5rem;
		border-radius: 50%;
	}
	.pay .header .h1{
		width: 20%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-left: 1rem;
	}
	.pay .header .h2{
		width: 25%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-right: 1rem;
	}
	.pay .header span{
		display: flex;
		margin-right: 1.25rem;
	}
	.pay .show{
		display: flex;
		width: 100%;
		height: 40%;
	}
	.pay .show .img{
		height: 100%;
		width: 25%;
		border-radius: 0.5rem;
		border: 0.0625rem gainsboro solid;
		margin-left: 1.25rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.pay .show .img img{
		width: 60%;
		height: 80%;
	}
	.pay .show p{
		font-size: 1.25rem;
		font-weight: 200;
		display: flex;
		width: 60%;
		margin-left: 0.625rem;
		word-break: break-all;
	}
	.pay .right{
		width: 100%;
		height: 15%;
		display: flex;
		align-items: center;
	}
	.pay .right label{
		margin-left: 50%;
		margin-right: 0.625rem;
	}
	.pay .right span{
		font-weight: 600;
	}
	.pay .box1{
		width: 100%;
		height: 4.375rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.pay .box1 button{
		height: 2rem;
		width: 8rem;
		background-color: deepskyblue;
		color: white;
		border: none;
		outline: none;
	}
</style>